<script setup lang="ts">
import { computed, ref } from "vue";
import LoginHeader from "@/views/login/components/loginHeader/loginHeader.vue";
import LoginFooter from "@/views/login/components/loginFooter/loginFooter.vue";
import QrCode from "@/views/login/components/qrCode/qrCode.vue";
import LoginForm from "@/views/login/components/loginForm/loginForm.vue";

const activeName = ref<string>("account");

const isAccount = computed(() => activeName.value === "account");

const isQrCode = computed(() => activeName.value === "qrcode");


const handleToggleLogin = (active: string) => {
   activeName.value = active;
};

</script>

<template>
   <div class="login">
      <login-header>
         <h4>欢迎登录</h4>
      </login-header>
      <section class="login-section">
         <div class="wrapper">
            <nav>
               <a :class="{active:isAccount}" @click="handleToggleLogin('account')">账户登录</a>
               <a :class="{active:isQrCode}" @click="handleToggleLogin('qrcode')">扫码登录</a>
            </nav>
            <!-- 表单登录-->
            <login-form v-if="isAccount"></login-form>
            <!-- 二维码登录 -->
            <qr-code v-if="isQrCode"></qr-code>
         </div>
      </section>
      <login-footer></login-footer>
   </div>
</template>

<style scoped lang="less">
.login-section {
   background: url(../../assets/images/login-bg.png);
   background-size: 101% 100%;
   height: 600px;
   position: relative;

   .wrapper {
      width: 400px;
      background: #fff;
      min-height: 430px;
      position: absolute;
      left: 50%;
      top: 54px;
      transform: translate3d(100px, 0, 0);
      box-shadow: 0 0 10px rgba(0, 0, 0, .15);

      nav {
         height: 55px;
         border-bottom: 1px solid #f5f5f5;
         display: flex;
         padding: 0 40px;
         text-align: right;
         align-items: center;

         a {
            display: inline-block;
            height: 100%;
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 18px;
            position: relative;

            &:first-child {
               border-right: 1px solid #f5f5f5;
               text-align: left;
            }

            &.active {
               color: @xtxColor;
               font-weight: bold;

               &::before {
                  content: "";
                  position: absolute;
                  bottom: 0;
                  left: 50%;
                  transform: translateX(-50%);
                  width: 100%;
                  height: 2px;
                  background: @xtxColor;
               }
            }
         }
      }


   }
}
</style>
